import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {actionCreator} from "./store";


class ProjectTypeComponent extends PureComponent {

    constructor(props){
        super(props);
        this.clickTipsIndex = this.clickTipsIndex.bind(this);


    }

    render() {

        return (
            <div style={pcWrapperStyle}>
                <ul style={leftUlStyle}>

                    {
                        this.props.typeTipsList.map((item, index) => {

                            return (
                                <li
                                    key={item.get("id")}
                                    style={leftItemLiStyle}
                                    dangerouslySetInnerHTML={{__html:item.get("name")}}

                                    onClick={()=>{
                                        const id = item.get("id");
                                        this.clickTipsIndex(id,index);
                                    }}
                                />
                            );
                        })
                    }
                </ul>

                <ul style={rightUlStyle}>

                    {
                        this.props.tipsListData.map((item,index) =>{

                            return (
                                <li
                                    style={rightItemLiStyle}
                                    key={item.get("id")}
                                >
                                    <img
                                        style={rightItemLiImgStyle}
                                        src={item.get("envelopePic")}
                                        alt={'test'}/>
                                    <div style={rightItemLiContentStyle}>
                                        <h3 style={rightItemLiTitleStyle}>{item.get("title")}</h3>
                                        <p style={rightItemLiPromptStyle}>{item.get("desc")}</p>
                                        <div style={rightItemLiAuthorStyle}>
                                            <span style={rightItemTimeStyle}>{item.get("niceDate")}</span>
                                            <span style={rightItemNameStyle}>{item.get("author")}</span>
                                            <span style={rightItemPicStyle}>爱心</span>
                                        </div>
                                    </div>
                                </li>
                            );
                        })
                    }
                </ul>

            </div>
        );
    }


    componentDidMount() {
        //请求 分类数据
        this.props.requestTypeTipsData();
    }

    clickTipsIndex(id,index){
        this.props.requestTipsListData(id,index);
    }

}

const mapState = (state) => {

    return {
        typeTipsList: state.getIn(["typeReducer", "typeTipsList"]),
        tipsListData: state.getIn(["typeReducer", "tipsListData"]),

    }
};

const dispatchState = (dispatch) => {

    return {
        requestTypeTipsData() {
            const action = actionCreator.requestTypeTipsData();
            dispatch(action);
        },requestTipsListData(id,page){
            const action =actionCreator.requestTipsListData(id,page);
            dispatch(action);
        }

    }
};


export default connect(mapState, dispatchState)(ProjectTypeComponent);


const pcWrapperStyle = {
    width: 1200,
    margin: "30px auto 0",
    backgroundColor: "#fff",
    paddingTop: 40,
    overflow:"hidden",
};

const leftUlStyle = {
    float: "left",
    width: 100,
    display: "block",
    borderTop: "solid 1px #dbe2e8",
    borderLeft: "solid 1px #dbe2e8",
    borderRight: "solid 1px #dbe2e8",
    marginBottom: 0,
    marginLeft: 30,
};

const leftItemLiStyle = {
    color: "#333",
    height: 30,
    textAlign: "center",
    lineHeight: "30px",
    fontSize: 13,
    borderBottom: "solid 1px #dbe2e8",
    cursor: "pointer",
};

const rightUlStyle = {
    marginBottom: 0,
    width: 1010,
    float: "left",
    display: "block",
    overflow: "hidden",
    marginLeft: 60,
};

const rightItemLiStyle = {
    float: 'left',
    display: "block",
    width: 480,
    height: 250,
    marginBottom: 20,
    marginRight: 20,
    border: "solid 1px #eee",
    boxSizing: 'border-box',
    borderRadius: 4,
    boxShadow: "rgba(0,0,0,.1) 0 1px 0 ",
    cursor: "pointer",
};

const rightItemLiImgStyle = {
    width: 140,
    height: 250,
    verticalAlign: "top",
    float: "left",
    display: "block",
    padding: 4,
};

const rightItemLiContentStyle = {
    float: "left",
    width: 338,
    height: 250,
    boxSizing: "border-box",
    paddingRight: 5,
    position: "relative",
};

const rightItemLiTitleStyle = {
    fontSize: 16,
    color: "#333",
    fontWeight: "700",
    marginTop: 10,
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    overflow: "hidden",

};
const rightItemLiPromptStyle = {
    color: "#767676",
    fontSize: 14,
};

const rightItemLiAuthorStyle = {
    width: "100%",
    position: "absolute",
    bottom: 10,
    left: 0,

};

const rightItemTimeStyle = {
    color: "#767676",
    fontSize: 14,
};

const rightItemNameStyle = {
    color: "#767676",
    fontSize: 14,
    paddingLeft: 10,
};

const rightItemPicStyle = {
    float: "right",
    marginRight: 10,

};


